<template>
  <div id="index_new">
    <div class="container">
      <img src="../../assets/login/logo.png" alt="" />
      <div class="login-box">
        <div class="title">密码登录</div>
        <div class="divider"></div>
        <input
          type="text"
          style="margin-bottom: 20px;"
          class="input-box username"
          placeholder="请输入用户名"
          v-model="dataForm.username"
        />
        <input
          type="password"
          class="input-box password"
          placeholder="请输入密码"
          v-model="dataForm.password"
        />
        <!-- <div class="verify-code-box" v-show="showCaptcha"> -->
        <!-- <div class="verify-code-box" v-show="true">
          <input
            type="text"
            class="input-box verify-code"
            placeholder="请输入验证码"
            v-model="dataForm.captchaCode"
          />
          <img class="code-image" :src="codeImg" alt="" @click="changeImg" />
        </div> -->
        <div class="remember-box">
          <input type="checkbox" v-model="rememberStatus" />
          <label>记住我的登录信息</label>
        </div>
        <input
          v-loading="loading"
          class="waves"
          type="button"
          value="登录"
          @click="login"
        />
      </div>
    </div>
  </div>
</template>

<script>
import mqtt from 'mqtt' // import mqtt

import { mapActions } from 'vuex'

export default {
  name: 'index_new',
  data() {
    return {
      dataForm: {
        username: '',
        password: '',
        captchaCode: ''
      },
      showCaptcha: false,
      codeImg: process.env.BASE_API + 'login/valid',
      rememberStatus: false,
      loading: false
    }
  },
  mounted() {
    // const client = mqtt.connect('ws://broker.emqx.io:8083/mqtt')
    // client.on('error', error => {
    //   console.log(error)
    // })
    // client.on('connect', () => {
    //   console.log('connected')
    // })
    // client.on('message', (topic, message) => {
    //   console.log(topic, message.toString())
    // })
  },
  methods: {
    changeImg() {
      this.codeImg = process.env.BASE_API + 'login/valid?' + Math.random()
    },
    ...mapActions(['generateRoutes']),
    login() {
      if (this.dataForm.username && this.dataForm.password) {
        this.loading = true
        this.$store
          .dispatch('login', this.dataForm)
          .then(({ data }) => {
            global.myFunctions = data.functions
            sessionStorage.setItem(
              'ButtonPermissions',
              JSON.stringify(global.myFunctions)
            )
            this.generateRoutes().then(() => {
              this.$router.addRoutes(this.$store.getters.addRouters)
              this.loading = false
              this.$router.push({ path: '/' })
            })
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: err.message,
              type: 'error'
            })
            const code = err.response.data.code
            if (code === 1006) {
              this.disabled = true
            }
            const times = err.response.data.data.times
            if (times > 2) {
              this.showCaptcha = true
              this.changeCodeImg()
            }
          })
      } else {
        if (!this.dataForm.username) {
          this.$message.error('请输入用户名')
        } else {
          this.$message.error('请输入密码')
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
#index_new {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/login/background.png');
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-color: #0b0e27;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    text-align: center;
    img {
      width: 400px;
      height: auto;
      margin-bottom: 30px;
    }
    .login-box {
      box-sizing: border-box;
      padding: 32px 60px 0 60px;
      width: 520px;
      height: 504px;
      background-image: url(../../assets/login/login-background.png);
      background-size: 520px 504px;
      background-repeat: no-repeat;
      .title {
        font-size: 24px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        margin-bottom: 25px;
      }
      .divider {
        width: 100%;
        height: 6px;
        border-bottom: 1px solid rgba(238, 238, 238, 0.20000000298023224);
        background-image: url(../../assets/login/divider-background.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 63px 6px;
        margin-bottom: 43px;
      }
      .input-box {
        padding: 20px 0 20px 50px;
        width: 400px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.10000000149011612);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(255, 255, 255, 0.3100000023841858);
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        outline: none;
        background-size: 24px 24px;
        background-position: 14px 17px;
        background-repeat: no-repeat;
      }
      .verify-code-box {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 400px;
        height: 60px;
        .code-image {
          height: 60px;
          width: 140px;
          margin-left: 20px;
          background-color: #ffffff;
          cursor: pointer;
          margin-bottom: 0;
        }
      }
      input::placeholder {
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.699999988079071);
      }
      .username {
        background-image: url(../../assets/login/username.png);
      }
      .password {
        background-image: url(../../assets/login/password.png);
      }
      .verify-code {
        background-image: url(../../assets/login/verify-code.png);
      }
      .remember-box {
        margin-top: 20px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        text-align: center;
        display: flex;
        align-items: center;
        input {
          margin-right: 5px;
          width: 16px;
          height: 16px;
          outline: none;
          appearance: none;
          border: 1px solid #3fa5fd;
          border-radius: 2px;
          &[type='checkbox']:checked {
            background-image: url(../../assets/login/check.png);
            background-size: 9px 9px;
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
      input[type='button'] {
        margin-top: 30px;
        outline: none;
        width: 400px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #3fa5fd;
        border-radius: 2px 2px 2px 2px;
        font-size: 20px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        border: none;
        &:hover {
        }
      }
    }
  }
}
</style>
